<!DOCTYPE html>
<html lang="en">
<head>
    <title>RealCoin</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
		user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    #progressTip{
        width: 100%;
        text-align: center;
        height: 20px;
        position: absolute;
        top: 0;
        line-height: 20px;
    }
    .father{
        width: 100%;
        height: 20px;
    }
    #son{
        width: 0;
        background-color: greenyellow;
        height: 100%;
    }
</style>
<body>
<div id="progress" class="father">
    <div id="son"></div>
</div>
<div id="progressTip">加载中，请稍等......</div>

<script src="js/three.js"></script>

<script src="js/OrbitControls.js"></script>
<script src="js/GLTFLoader.js"></script>

<script src="js/EquirectangularToCubeGenerator.js"></script>
<script src="js/RGBELoader.js"></script>

<script src="js/PMREMGenerator.js"></script>
<script src="js/PMREMCubeUVPacker.js"></script>

<!--<script src="js/WebGL.js"></script>-->
<script src="js/stats.min.js"></script>

<script>





    var container, stats, controls;
    var camera, scene, renderer;
    var MyOb;

    init();
    animate();

    function init() {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 900000000);
        camera.position.set(-1.8, 0.9, 2.7);

        scene = new THREE.Scene();

        var loader = new THREE.RGBELoader().setPath('equirectangular/');
        loader.load('pedestrian_overpass_2k.hdr', function (texture) {

            texture.encoding = THREE.RGBEEncoding;
            texture.minFilter = THREE.NearestFilter;
            texture.magFilter = THREE.NearestFilter;
            texture.flipY = true;

            var cubeGenerator = new THREE.EquirectangularToCubeGenerator(texture, {resolution: 1024});
            cubeGenerator.update(renderer);

            var pmremGenerator = new THREE.PMREMGenerator(cubeGenerator.renderTarget.texture);
            pmremGenerator.update(renderer);

            var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker(pmremGenerator.cubeLods);
            pmremCubeUVPacker.update(renderer);

            var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;


            // 加载金币模型
            (function sceneGLTFLoader() {
                let directionalLight = new THREE.DirectionalLight(0xffffff, 50);
                directionalLight.position.z = 7;
                let directionalLight2 = new THREE.DirectionalLight(0xffffff, 50);
                directionalLight2.position.x = 7;
                let directionalLight3 = new THREE.DirectionalLight(0xffffff, 50);
                directionalLight3.position.x = -7;
                let directionalLight4 = new THREE.DirectionalLight(0xffffff, 50);
                directionalLight4.position.z = -7;
                scene.add(directionalLight);
                scene.add(directionalLight2);
                scene.add(directionalLight3);
                scene.add(directionalLight4);
                let pointLight = new THREE.PointLight(0xffffff, 200, 80);
                scene.add(pointLight);


                let MyTexture = new THREE.TextureLoader().load("./matcap-porcelain-white.jpg");
                MyTexture.wrapS = THREE.RepeatWrapping;
                MyTexture.wrapT = THREE.RepeatWrapping;
                MyTexture.repeat.set(4, 4);


                let PhyMaterial = new THREE.MeshPhysicalMaterial({
                    color: 0xffffff,
                    matcap: MyTexture,
                    metalness: 1,
                    roughness: 0,
                    clearcoat: 0,
                    clearcoatRoughness: 0,
                    reflectivity: 1.0,
                    envMap : envMap,
                });

                let loader2 = new THREE.GLTFLoader();
                loader2.load('./Gold4.glb', function (gltf) {
                        gltf.scene.scale.set(5, 5, 5);
                        gltf.scene.traverse(function (child) {
                            if (child.isMesh) {
                                console.log(child);
                                PhyMaterial.map = child.material.map;
                                child.material = PhyMaterial;
                                MyOb = child;
                            }
                        });

                        // mixer = new THREE.AnimationMixer(gltf.scene);
                        // mixer.clipAction(gltf.animations[0]).play();
                        scene.add(MyOb);
                    },
                    function (xhr) {
                        let pro = Math.floor((xhr.loaded + 6158536) / 6754404 *10000)/100;
                        let progressBar = document.getElementById('progressTip');
                        progressBar.innerText =
                            '加载中 ' + pro + '%......';
                        let son = document.getElementById('son');
                        son.style.width = pro + '%';

                        if (pro === 100){
                            // animate();
                            let progress = document.getElementById('progress');
                            progress.style.display = 'none';
                            progressBar.style.display = 'none';
                        }
                    }, function (err) {
                        console.log(err);
                    });
            })();

            pmremGenerator.dispose();
            pmremCubeUVPacker.dispose();
            scene.background = cubeGenerator.renderTarget;

        },
            function (xhr) {
            let pro = Math.floor(xhr.loaded / 6754404 *10000)/100;
            let progressBar = document.getElementById('progressTip');
            progressBar.innerText =
                '加载中 ' + pro + '%......';
            let son = document.getElementById('son');
            son.style.width = pro + '%';
        });


        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.gammaOutput = true;
        container.appendChild(renderer.domElement);

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.target.set(0, -0.2, -0.2);
        controls.update();

        window.addEventListener('resize', onWindowResize, false);

        // stats
        stats = new Stats();
        container.appendChild(stats.dom);

    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }


    function animate() {
        requestAnimationFrame(animate);
        stats.update();
        if(MyOb){
            MyOb.rotation.y += 0.005;
        }

        renderer.render(scene, camera);
    }

</script>

</body>
</html>
